<template>
  <a-drawer
    :label-col="4"
    :visible="open"
    :wrapper-col="14"
    width="35%"
    @close="cancel">
    <template slot="title">
      <b>{{ formTitle }}</b>
    </template>
    <a-form-model
      ref="form"
      :model="form"
      :rules="rules"
    >

      <a-form-model-item label="商圈名称" prop="areaName">
        <a-input v-model="form.areaName" placeholder="请输入商圈名称" />
      </a-form-model-item>

      <a-form-model-item label="区域人口规模" prop="populationSize">
        <a-input v-model="form.populationSize" placeholder="请输入区域人口规模" addon-after="万人" />
      </a-form-model-item>

      <a-form-model-item label="新房房价" prop="newHomePrices">
        <a-input v-model="form.newHomePrices" placeholder="请输入新房房价" addon-after="m²/元" />
      </a-form-model-item>

      <a-form-model-item label="二手房价格" prop="oldHomePrices">
        <a-input v-model="form.oldHomePrices" placeholder="请输入二手房价格" addon-after="m²/元" />
      </a-form-model-item>

      <a-form-model-item label="人口规模占比" prop="populationSizeRate">
        <a-input v-model="form.populationSizeRate" placeholder="请输入人口规模占比" addon-after="%" />
      </a-form-model-item>

      <a-form-model-item label="新房房价占比" prop="newHomePricesRate">
        <a-input v-model="form.newHomePricesRate" placeholder="请输入新房房价占比" addon-after="%" />
      </a-form-model-item>

      <a-form-model-item label="二手房房价占比" prop="oldHomePricesRate">
        <a-input v-model="form.oldHomePricesRate" placeholder="请输入二手房房价占比" addon-after="%" />
      </a-form-model-item>

      <a-form-model-item label="地铁站数量" prop="subway">
        <a-input v-model="form.subway" placeholder="请输入地铁站数量" addon-after="个" />
      </a-form-model-item>

      <a-form-model-item label="公交站数量" prop="bus">
        <a-input v-model="form.bus" placeholder="请输入公交站数量" addon-after="个" />
      </a-form-model-item>

      <a-form-model-item label="驾车到最近火车站时间" prop="trainTime">
        <a-input v-model="form.trainTime" placeholder="请输入驾车到最近火车站时间" addon-after="分钟" />
      </a-form-model-item>

      <a-form-model-item label="步行到地铁站时间" prop="subwayTime">
        <a-input v-model="form.subwayTime" placeholder="请输入步行到地铁站时间" addon-after="分钟" />
      </a-form-model-item>

      <a-form-model-item label="步行到公交时间" prop="busTime">
        <a-input v-model="form.busTime" placeholder="请输入步行到公交时间" addon-after="分钟" />
      </a-form-model-item>

      <a-form-model-item label="驾车到最近机场时间" prop="arrivalTime">
        <a-input v-model="form.arrivalTime" placeholder="请输入驾车到最近机场时间" addon-after="分钟" />
      </a-form-model-item>

      <a-form-model-item label="居民区数量" prop="residentsNumber">
        <a-input v-model="form.residentsNumber" placeholder="请输入居民区数量" addon-after="个" />
      </a-form-model-item>

      <a-form-model-item label="写字楼数量" prop="officeNumber">
        <a-input v-model="form.officeNumber" placeholder="请输入写字楼数量" addon-after="个" />
      </a-form-model-item>

      <a-form-model-item label="酒店数量" prop="hotelNumber">
        <a-input v-model="form.hotelNumber" placeholder="请输入酒店数量" addon-after="个" />
      </a-form-model-item>

      <a-form-model-item label="餐厅数量" prop="restaurantNumber">
        <a-input v-model="form.restaurantNumber" placeholder="请输入餐厅数量" addon-after="个" />
      </a-form-model-item>

      <a-form-model-item label="购物中心数量" prop="shoppingNumber">
        <a-input v-model="form.shoppingNumber" placeholder="请输入购物中心数量" addon-after="个" />
      </a-form-model-item>

      <a-form-model-item label="交通站点数量" prop="trafficNumber">
        <a-input v-model="form.trafficNumber" placeholder="请输入交通站点数量" addon-after="个" />
      </a-form-model-item>

      <a-form-model-item label="教育机构数量" prop="eduNumber">
        <a-input v-model="form.eduNumber" placeholder="请输入教育机构数量" addon-after="个" />
      </a-form-model-item>

      <a-form-model-item label="休闲娱乐数量" prop="leisureNumber">
        <a-input v-model="form.leisureNumber" placeholder="请输入休闲娱乐数量" addon-after="个" />
      </a-form-model-item>

      <a-form-model-item label="旅游景点数量" prop="tourismNumber">
        <a-input v-model="form.tourismNumber" placeholder="请输入旅游景点数量" addon-after="个" />
      </a-form-model-item>

      <div class="bottom-control">
        <a-space>
          <a-button type="primary" @click="submitForm">
            保存
          </a-button>
          <a-button type="dashed" @click="cancel">
            取消
          </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { getArea, addArea, updateArea } from '@/api/platform/area'

export default {
  name: 'CreateDataForm',
  props: {
    parentId: {
      type: Number,
      required: true
    }
  },
  components: {},
  data () {
    return {
      // 表单是否可见
      open: false,
      // 表单名称
      formTitle: '',
      // 加载是否可见
      loading: false,
      // 表单参数
      form: {
        areaId: undefined,
        parentId: undefined,
        userId: undefined,
        deptId: undefined,
        areaName: undefined,
        populationSize: undefined,
        newHomePrices: undefined,
        oldHomePrices: undefined,
        populationSizeRate: undefined,
        newHomePricesRate: undefined,
        oldHomePricesRate: undefined,
        subway: undefined,
        bus: undefined,
        trainTime: undefined,
        subwayTime: undefined,
        busTime: undefined,
        arrivalTime: undefined,
        residentsNumber: undefined,
        officeNumber: undefined,
        hotelNumber: undefined,
        restaurantNumber: undefined,
        shoppingNumber: undefined,
        trafficNumber: undefined,
        eduNumber: undefined,
        leisureNumber: undefined,
        tourismNumber: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        remark: undefined
      },
      // 校验规则
      rules: {
        areaName: [{ required: true, message: '商圈名称不能为空', trigger: 'change' }],
        populationSize: [{ required: true, message: '人口规模不能为空', trigger: 'change' }],
        newHomePrices: [{ required: true, message: '新房房价不能为空', trigger: 'change' }],
        oldHomePrices: [{ required: true, message: '二手房价格不能为空', trigger: 'change' }],
        populationSizeRate: [{ required: true, message: '人口规模占比不能为空', trigger: 'change' }],
        newHomePricesRate: [{ required: true, message: '新房房价占比不能为空', trigger: 'change' }],
        oldHomePricesRate: [{ required: true, message: '二手房房价占比不能为空', trigger: 'change' }],
        subway: [{ required: true, message: '地铁站数量不能为空', trigger: 'change' }],
        bus: [{ required: true, message: '公交站数量不能为空', trigger: 'change' }],
        trainTime: [{ required: true, message: '驾车到最近火车站时间不能为空', trigger: 'change' }],
        subwayTime: [{ required: true, message: '步行到地铁站时间不能为空', trigger: 'change' }],
        busTime: [{ required: true, message: '步行到公交时间不能为空', trigger: 'change' }],
        arrivalTime: [{ required: true, message: '驾车到最近机场时间不能为空', trigger: 'change' }],
        residentsNumber: [{ required: true, message: '居民区数量不能为空', trigger: 'change' }],
        officeNumber: [{ required: true, message: '写字楼数量不能为空', trigger: 'change' }],
        hotelNumber: [{ required: true, message: '酒店数量不能为空', trigger: 'change' }],
        restaurantNumber: [{ required: true, message: '餐厅数量不能为空', trigger: 'change' }],
        shoppingNumber: [{ required: true, message: '购物中心数量不能为空', trigger: 'change' }],
        trafficNumber: [{ required: true, message: '交通站点数量不能为空', trigger: 'change' }],
        eduNumber: [{ required: true, message: '教育机构数量不能为空', trigger: 'change' }],
        leisureNumber: [{ required: true, message: '休闲娱乐数量不能为空', trigger: 'change' }],
        tourismNumber: [{ required: true, message: '旅游景点数量不能为空', trigger: 'change' }]
      }
    }
  },
  filters: {
  },
  created () {
  },
  computed: {
  },
  watch: {
  },
  mounted () {
  },
  methods: {
    /** 新增按钮操作 */
    handleAdd () {
      this.reset()
      this.open = true
      this.formTitle = '添加商圈'
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      this.reset()
      getArea(row.areaId).then(response => {
        this.form = response.data
        this.open = true
        this.formTitle = '修改商圈'
      })
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset () {
      this.form = {
        areaId: undefined,
        userId: undefined,
        deptId: undefined,
        areaName: undefined,
        populationSize: undefined,
        newHomePrices: undefined,
        oldHomePrices: undefined,
        populationSizeRate: undefined,
        newHomePricesRate: undefined,
        oldHomePricesRate: undefined,
        subway: undefined,
        bus: undefined,
        trainTime: undefined,
        subwayTime: undefined,
        busTime: undefined,
        arrivalTime: undefined,
        residentsNumber: undefined,
        officeNumber: undefined,
        hotelNumber: undefined,
        restaurantNumber: undefined,
        shoppingNumber: undefined,
        trafficNumber: undefined,
        eduNumber: undefined,
        leisureNumber: undefined,
        tourismNumber: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        remark: undefined
      }
    },
    // 确定按钮
    submitForm: function () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.parentId = this.parentId
          if (this.form.areaId !== undefined && this.form.areaId !== null) {
            updateArea(this.form).then(response => {
              this.$message.success(
                '修改成功',
                3
              )
              this.open = false
              this.$emit('ok')
            })
          } else {
            addArea(this.form).then(response => {
              this.$message.success(
                '新增成功',
                3
              )
              this.open = false
              this.$emit('ok')
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
